<template>
    <div class="page-wrap">
        <div class="table-header-wrap">
            <flexbox justify="flex-end" align="center" class="table-header-cont">
                <a-input-search placeholder="请输入关键字" enter-button @search="(val) => handleSearch({ name: val })" style="width: 348px" />
            </flexbox>
        </div>
        <flexbox justify="space-between" align="center" class="table-toolbar-wrap">
            <div class="table-title">方法模板列表</div>
            <div class="btn-group-wrap">
                <a-button type="primary" @click="handleCreate"> 新增 </a-button>
            </div>
        </flexbox>
        <a-table
            rowKey="id"
            size="small"
            :loading="loading"
            :columns="tableColumns"
            :data-source="list"
            :pagination="paginationConfig"
            @change="handleTableChange"
        >
            <template #file="{ record }">
                <a @click="download(record)">{{ record.file }}</a>
            </template>
            <template #link="{ record }">
                <a @click="jumpTo(record)">{{ record.link }}</a>
            </template>
            <template #action="{ record }">
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a @click="handleDelete(record.id, record.name)">删除</a>
            </template>
        </a-table>
        <form-modal ref="createModalRef" @success="getList" />

        <StageList />
    </div>
</template>

<script lang="ts">
import Box from './components/Box.vue';
import FormModal from './components/formModal.vue';
import StageList from './components/StageList.vue';
import { downByBlob } from '@/utils/file/downFile';
import api from '@/api';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import { useTableData, useTableLoading, usePagination, useTableColumns, useTableFormSearch, useTableAction } from '@/components/Table/hooks/index';
import { defineComponent, unref, ref } from 'vue';
export default defineComponent({
    name: 'templateList',
    components: {
        FormModal,
        Box,
        StageList
    },
    setup() {
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('methodsTemplate');
        const { list, getList, handleTableChange, setSearchQuery } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'methodsTemplate');
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const { handleDelete } = useTableAction('methodsTemplate', getList);
        const createModalRef = ref();
        const handleCreate = () => {
            createModalRef.value.open({
                type: 'create'
            });
        };
        const handleEdit = (data) => {
            createModalRef.value.open({
                type: 'edit',
                data
            });
        };
        // 下载
        const download = async (item: any) => {
            const query = {
                url: item.fileUrl
            };
            const res = await api.fileModel.down(query, {
                responseType: 'blob'
            });
            res && downByBlob(res, item.file);
            updateClick(item.id);
        };
        const updateClick = async (id) => {
            const query = { id };
            const { success } = await api.referenceTemplateModel.updateClick(query);
            if (success) {
                getList();
            }
        };
        // 链接跳转
        const jumpTo = (item) => {
            window.open(item.link, '_blank');
            updateClick(item.id);
        };

        useMountedAndActivated(getList);

        return {
            createModalRef,
            handleCreate,
            handleEdit,
            download,
            jumpTo,
            list,
            getList,
            tableColumns,
            loading,
            paginationConfig,
            handleTableChange,
            handleDelete,
            handleSearch
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 24px;
    background: #fff;
    .table-toolbar-wrap {
        margin: 16px 0;
        .btn-group-wrap {
            .ant-btn + .ant-btn {
                margin-left: 8px;
            }
        }
    }
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
}
</style>